<template>
    <div class="cell-detail-container-warpper">
        <div class="cell-detail-title">详细信息</div>
        <div class="cell-detail-container" ref="cellDetailContainerRef">
            <a-collapse v-model:activeKey="activeKey" expand-icon-position="right">
                <a-collapse-panel key="1" header="业务数据">
                    <template v-if="formState.shape == 'er-table'">
                        <a-form :model="formState" layout="vertical">
                            <a-form-item label="表名称">
                                <a-input readOnly v-model:value="formState.tableInfo.tableName" />
                            </a-form-item>
                            <a-form-item label="表说明">
                                <a-input v-model:value="formState.tableInfo.tableComment" />
                            </a-form-item>
                        </a-form>
                        <a-button class="editable-add-btn" @click="handleAdd" style="margin-bottom: 8px">Add</a-button>
                        <a-table :data-source="formState.tableInfo.columnList" :columns="columns" :pagination="false">
                        </a-table>
                    </template>
                    <a-form :model="formState" layout="vertical" v-if="formState.shape == 'edge'">
                        <a-form-item label="源">
                            <a-input readOnly v-model:value="formState.attr.edge.start" />
                        </a-form-item>
                        <a-form-item label="目标">
                            <a-input v-model:value="formState.attr.edge.end" />
                        </a-form-item>
                        <a-form-item label="文本">
                            <a-input v-model:value="formState.attr.edge.label" @pressEnter="onAttrChanged"/>
                        </a-form-item>
                    </a-form>
                    <!-- <template #extra><setting-outlined /></template> -->
                </a-collapse-panel>
                <a-collapse-panel key="2" header="元素属性">
                    <a-form :model="formState" layout="vertical" v-if="formState.shape == 'edge'">
                        <a-form-item label="颜色">
                            <a-input v-model:value="formState.attr.edge.line_stroke" />
                        </a-form-item>
                        <!-- <a-form-item label="样式">
                            <a-input v-model:value="formState.attr.edge.line_stroke" />
                        </a-form-item> -->
                        <a-form-item label="源箭头">
                            <a-input v-model:value="formState.attr.edge.sourceMarker" />
                        </a-form-item>
                        <a-form-item label="目标箭头">
                            <a-input v-model:value="formState.attr.edge.targetMarker" />
                        </a-form-item>
                    </a-form>
                    <!-- <template #extra><setting-outlined @click="handleClick" /></template> -->
                </a-collapse-panel>
            </a-collapse>
        </div>
    </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
    name: "ErCellDetail",
    setup() {
        let columns = [{
            title: '名称',
            dataIndex: 'columnCode',
            key: 'columnCode',
        }, {
            title: '中文名称',
            dataIndex: 'columnName',
            key: 'columnName',
        }, {
            title: '类型',
            dataIndex: 'dataType',
            key: 'dataType',
        },
        ];
        let formState = reactive({
            tableInfo: {
                id: '',
                tableName: '',
                tableComment: '',
                columnList: [{
                    columnCode: '',
                    columnName: '',
                    dataType: ''
                }],
            },
            shape: '',
            attr: {
                edge: {
                    start: '',
                    end: '',
                    label: '',
                    line_stroke: '',
                    sourceMarker: '',
                    targetMarker: '',
                }
            }
        });
        let currentCell = null;
        const loadDetailData = (cell) => {
            currentCell = cell;
            let shape = cell.shape;
            if (shape == "er-table") {
                formState.shape = 'er-table';
                let cellData = cell.getData();
                if (cellData) {
                    formState.tableInfo = { ...cellData.tableInfo }
                }
                console.log("loadDetailData", cell);
            } else if (shape == 'edge') {
                formState.shape = 'edge';
                let edgeAttr = formState.attr.edge;
                edgeAttr.line_stroke = cell.getAttrByPath("line/stroke");
                edgeAttr.sourceMarker = cell.getAttrByPath("line/sourceMarker");
                edgeAttr.targetMarker = cell.getAttrByPath("line/targetMarker");

                const source = cell.source;
                const target = cell.target;
                const sourceCell = cell._model.graph.model.collection.cells.find((tempCell) => {
                    return source.cell == tempCell.id;
                })
                const targetCell = cell._model.graph.model.collection.cells.find((tempCell) => {
                    return target.cell == tempCell.id;
                })
                edgeAttr.start = sourceCell.getData().tableInfo.tableName + "-" + source.port;
                edgeAttr.end = targetCell.getData().tableInfo.tableName + "-" + target.port;
                edgeAttr.label = cell.getLabels()[0].attrs.label.text;
            }
        }
        const onAttrChanged = () => {
            const label = formState.attr.edge.label;
            currentCell.setLabelAt(0, label);
        }
        const handleAdd = () => {
            const newData = {
                columnCode: '',
                columnName: '',
                dataType: '',
            };
            formState.tableInfo.columnList.push(newData);
        };
        return {
            formState,
            loadDetailData,
            handleAdd,
            columns,
            onAttrChanged,
        };
    },
});
</script>
<style>
.ant-layout-sider-collapsed .cell-detail-container-warpper .cell-detail-container {
    display: none;
}

.ant-layout-sider-collapsed .cell-detail-container-warpper .cell-detail-title {
    word-wrap: break-word;
    /*英文的时候需要加上这句，自动换行*/
    /*自测了这句话没啥用*/
    writing-mode: vertical-rl;
    /*从左向右 从右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-rl;
    /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
    text-align: center;
    padding: 0px;
    display: flex;
    -webkit-display: flex;
    flex-direction: column;
    height: 150px;
    color: #a8cfe6;
    justify-content: center;
}
</style>